<template>
    <div class="container">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>UV PV</span>
                    <el-button class="button" @click="refresh" type="primary" link>刷新</el-button>
                </div>
            </template>
            <el-row>
                <el-col :span="12">
                    <div class="item">
                        <div class="label">累计UV</div>
                        <div> <span class="number">{{ dataPUv.UV }}</span> <span class="unit">个</span> </div>
                    </div>
                    <div class="item">
                        <div class="label">当日UV</div>
                        <div> <span class="number">{{ dataPUv.TUV }}</span> <span class="unit">个</span> </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="item">
                        <div class="label">累计PV</div>
                        <div> <span class="number">{{ dataPUv.PV }}</span> <span class="unit">个</span> </div>
                    </div>
                    <div class="item">
                        <div class="label">当日PV</div>
                        <div> <span class="number">{{ dataPUv.TPV }}</span> <span class="unit">个</span> </div>
                    </div>
                </el-col>
            </el-row>
            <template #footer>{{ timeStr }}</template>
        </el-card>
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>UV-PV变化图</span>
                    <div>
                        <el-button class="button" size="small" @click="refresh" type="primary">年</el-button>
                        <el-button class="button" size="small" @click="refresh" type="primary" plain>月</el-button>
                        <el-button class="button" size="small" @click="refresh" type="primary" plain>日</el-button>
                    </div>
                </div>
            </template>
            <el-row>
                <img style="width: 100%;height: 240px;" src="@/assets/image/dashbroad_demo2.png" alt="">
            </el-row>
        </el-card>
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>用户列表</span>
                    <div>
                        <el-button class="button" size="small" @click="refresh" type="primary">当日</el-button>
                        <el-button class="button" size="small" @click="refresh" type="primary" plain>全部</el-button>
                    </div>
                </div>
            </template>
            <el-row>
                <el-table :data="tableData" stripe style="width: 100%">
                    <el-table-column prop="date" label="访问时间" width="200" />
                    <el-table-column prop="name" label="用户信息" width="180" />
                    <el-table-column prop="address" label="地域" />
                </el-table>
            </el-row>
        </el-card>
           <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>页面访问分析</span>
                    <div>
                         <el-button class="button" type="primary" link>刷新</el-button>
                    </div>
                </div>
            </template>
            <el-row>
                  <img style="width: 100%;height: 240px;" src="@/assets/image/dashbroad_demo.png" alt="">
            </el-row>
        </el-card>
    </div>
</template>
<script lang="ts" setup>
import { getNowTime } from '@/plugins/moment'
import { onMounted, onUnmounted, reactive, ref } from 'vue';
import { getPvUv } from '@/api/dashbroad'
const timeStr = ref('')
const updateTime = () => {
    timeStr.value = getNowTime();
};
let interval: any = null
const dataPUv = reactive({
    UV: 0,
    TUV: 0,
    PV: 0,
    TPV: 0
})
const refresh = () => {
    getPvUv({}).then((data) => {
        const { uv, pv, tpv, tuv } = data;
        dataPUv.UV = uv
        dataPUv.TUV = tuv
        dataPUv.PV = pv
        dataPUv.TPV = tpv
    })
}

onMounted(() => {
    refresh()
    updateTime()
    interval = setInterval(updateTime, 1000);
});
onUnmounted(() => {
    if (interval) clearInterval(interval)
})

/**
 * 用户列表
 */
const tableData = [
    {
        date: '2016-05-03 12:09:08',
        name: 'Tom',
        address: '上海',
    },
    {
        date: '2016-05-02 06:07:25',
        name: 'Tom',
        address: '苏州',
    },
    {
        date: '2016-05-04 19:25:36',
        name: 'Tom',
        address: '无锡',
    },
    {
        date: '2016-05-01 20:30:20',
        name: 'Tom',
        address: '宁波',
    },
]
</script>
<style lang="scss" scoped>
.container {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.box-card {
    width: calc(50% - 30px);
    height: 320px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.item {
    margin-bottom: 18px;

    .label {
        color: #999;
    }

    .number {
        font-size: 24px;
        font-weight: 600;
        color: #333;
    }

    .unit {
        font-size: 14px;
        color: #999;
    }
}
</style>